import {getUserInfoByUserDDId} from '@/api/login'
import {TargetWeight} from '@/components/input/targetWeight'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import {getDepartAndUser, getDDUsers} from '@/libs/dingding'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'

/**流程设置layout */
export const SetTemLayout = defineComponent({
  setup(props, {slots}) {
    return () => (
      <div class='px-16 py-24'>
        <table
          class='table-auto'
          style={{
            borderCollapse: 'separate',
            borderSpacing: '0 12px'
          }}
        >
          {slots.default?.()}
        </table>
      </div>
    )
  }
})

/**选择主管等级 单选*/
const SelectLeaderLevel = defineComponent({
  props: {
    value: String
  },
  emits: {
    'update:value': (data: string): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      level: string | undefined
      options: {label: string; value: string}[]
    }>({
      level: undefined,
      options: [
        {label: '直属主管', value: '1'},
        {label: '2级主管', value: '2'},
        {label: '3级主管', value: '3'},
        {label: '4级主管', value: '4'},
        {label: '5级主管', value: '5'},
        {label: '6级主管', value: '6'}
      ]
    })

    watch(
      () => props.value,
      n => {
        let level = n || '1' //这里的 '1' 就是另外的数据。在这里做变化，会导致初次加载时，其他监听器还没启动，所以无法监听到 state.level变化

        console.log('选择主管,传入的值', level)

        state.level = level
      },
      {immediate: true}
    )

    watch(
      () => state.level,
      n => {
        let level = n

        console.log('选择主管，列表选择变化，返回数据', level)

        emit('update:value', level || '')
      },
      {deep: true, immediate: true} //监听props.value变化时，应该给level赋值props.value的传入值，若是赋值另外的数据时，就需要在监听state.level上加immediate
    )

    function getOptionLabelByValue(value: string) {
      return state.options.find(item => item.value === value)?.label || ''
    }

    return () => (
      <div>
        <div class='flex items-center gap-x-12'>
          <CnMediumSpan>被考评人的</CnMediumSpan>
          <a-select
            v-model={[state.level, 'value']}
            options={state.options}
            size='small'
            class='w-200'
            clearable
          ></a-select>
        </div>
      </div>
    )
  }
})

/**选择主管等级 多选*/
const SelectLeaderLevelMultiple = defineComponent({
  props: {
    value: String
  },
  emits: {
    'update:value': (data: string): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      level: string[] | undefined
      options: {label: string; value: string}[]
    }>({
      level: undefined,
      options: [
        {label: '直属主管', value: '1'},
        {label: '2级主管', value: '2'},
        {label: '3级主管', value: '3'},
        {label: '4级主管', value: '4'},
        {label: '5级主管', value: '5'},
        {label: '6级主管', value: '6'}
      ]
    })

    watch(
      () => props.value,
      n => {
        console.log('选择主管时传入的值', n)
        if (!n) {
          state.level = undefined
        } else {
          let level = n.split(';')
          state.level = level.length ? level : undefined
        }
      },
      {immediate: true}
    )

    watch(
      () => state.level,
      n => {
        let returnData = (n || []).join(';')

        emit('update:value', returnData || '')
      },
      {deep: true}
    )

    function getOptionLabelByValue(value: string) {
      return state.options.find(item => item.value === value)?.label || ''
    }

    return () => (
      <div>
        <div class='flex items-center gap-x-12'>
          <CnMediumSpan>被考评人的</CnMediumSpan>
          <a-select
            v-model={[state.level, 'value']}
            mode='multiple'
            options={state.options}
            size='small'
            class='w-200'
            clearable
          ></a-select>
        </div>
      </div>
    )
  }
})

/**选择主管等级 多选 附带输入权重*/
const SelectLeaderLevelAndWeight = defineComponent({
  props: {
    value: String
  },
  emits: {
    'update:value': (data: string): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      level: string[] | undefined
      weights: number[]
      options: {label: string; value: string}[]
    }>({
      level: undefined,
      options: [
        {label: '直属主管', value: '1'},
        {label: '2级主管', value: '2'},
        {label: '3级主管', value: '3'},
        {label: '4级主管', value: '4'},
        {label: '5级主管', value: '5'},
        {label: '6级主管', value: '6'}
      ],
      weights: []
    })

    watch(
      () => props.value,
      n => {
        console.log('选择主管时传入的值', n)
        const level = (n || '')
          .split(';')
          .map(item => item.split(',')[0])
          .filter(item => (item ?? null) !== null && item === item && item !== '')

        state.level = level.length ? level : undefined

        console.log('level', level)

        state.weights = level.length
          ? (n || '').split(';').map(item => {
              let weight = Number((item.split(',')[1] ?? null) !== null ? item.split(',')[1] : 100)
              return weight
            })
          : []
        console.log('weights', state.weights)
      },
      {immediate: true}
    )

    watch(
      () => state.level,
      n => {
        let returnData =
          n
            ?.map((item, idx) => {
              let weight = Number((state.weights[idx] ?? null) !== null ? state.weights[idx] : 100)
              return item + ',' + weight
            })
            .join(';') || ''

        console.log('watch level returnData', returnData)
        emit('update:value', returnData || '')
      },
      {deep: true}
    )

    watch(
      () => state.weights,
      n => {
        let returnData =
          state.level
            ?.map((item, idx) => {
              let weight = Number((n[idx] ?? null) !== null ? n[idx] : 100)
              return item + ',' + weight
            })
            .join(';') || ''

        console.log('watch weights returnData', returnData)

        emit('update:value', returnData || '')
      },
      {deep: true}
    )

    function getOptionLabelByValue(value: string) {
      return state.options.find(item => item.value === value)?.label || ''
    }

    return () => (
      <div>
        <div class='flex items-center gap-x-12'>
          <CnMediumSpan>被考评人的</CnMediumSpan>
          <a-select
            v-model={[state.level, 'value']}
            mode='multiple'
            options={state.options}
            size='small'
            class='w-200'
            clearable
          ></a-select>
        </div>
        <div class='w-300 flex flex-col gap-y-8 mt-12'>
          {(state.level || []).map((item, idx) => (
            <div class='w-full flex items-center gap-x-12'>
              <CnNormalSpan>{getOptionLabelByValue(item)}的权重</CnNormalSpan>
              <TargetWeight class='flex-1' v-model={[state.weights[idx], 'value']}></TargetWeight>
            </div>
          ))}
        </div>
      </div>
    )
  }
})

/**选择员工 根据传入状态的type，判断单选还是多选*/
const SelectEmployee = defineComponent({
  props: {
    value: {
      type: String
    },
    type: {
      type: String as PropType<'radio' | 'multiple'>,
      default: 'radio'
    }
  },
  emits: {
    'update:value': (data: string): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      userList: string[]
      weights: number[]
    }>({
      userList: [],
      weights: []
    })

    const userIdList = computed(() => {
      return state.userList.map(item => item.split(',')[0])
    })

    watch(
      () => props.value,
      n => {
        console.log('选择员工时获取的传入值', n)
        if (n) {
          state.userList = n.split(';')
        } else {
          state.userList = []
        }
        console.log('当前已选择的员工', state.userList)
      },
      {immediate: true}
    )

    watch(
      () => state.userList,
      n => {
        console.log('选择员工 已选择的员工发生变化 向父组件返回', n, n.join(';'))
        emit('update:value', n.join(';'))
      },
      {deep: true}
    )

    function handleSelectEmployeeClick() {
      getDDUsers({
        // userIdList.value
        users: userIdList.value,
        multiple: props.type === 'radio' ? false : true
      })
        .then(res => {
          if (res !== 'cancel') {
            state.userList = (res || []).map((item: any) => item.emplId + ',' + item.name)
          }
          console.log('已选择的员工id列表', userIdList.value)
        })
        .catch(err => {
          console.log(err)
        })
    }

    function handleTagClose(index: number) {
      state.userList.splice(index, 1)
      console.log('删除后的userList', state.userList)
    }

    return () => (
      <div class='flex gap-x-16'>
        <a-button type='primary' size='small' class='rounded-4 bg-primary text-white' onClick={handleSelectEmployeeClick}>
          选择指定员工{props.type === 'radio' ? `(单选)` : `(多选)`}
        </a-button>
        <div class='flex flex-wrap items-center gap-x-8 gap-y-8'>
          {state.userList.length ? (
            state.userList.map((item, idx) => <a-tag color='blue'>{item.split(',')[1]}</a-tag>)
          ) : (
            <a-tag color='orange'>未选择员工</a-tag>
          )}
        </div>
      </div>
    )
  }
})

/**选择员工 多选 附带输入权重*/
const SelectEmployeeAndWeight = defineComponent({
  props: {
    value: {
      type: String
    }
  },
  emits: {
    'update:value': (data: string): boolean => true
  },
  setup(props, {emit}) {
    type UserList = `${string}-${string}`[]
    type Weights = number[]

    let state = reactive<{
      userList: UserList
      weights: (number | undefined)[]
    }>({
      userList: [],
      weights: []
    })

    const userIdList = computed(() => state.userList.map(item => item.split('-')[0]))
    const userNameList = computed(() => state.userList.map(item => item.split('-')[1]))

    watch(
      () => props.value,
      async n => {
        console.log('选择员工 多选 附带输入权重; 获取的传入值', n)
        if (n) {
          state.userList = n.split(';').map(item => item.split(',')[0] as `${string}-${string}`)

          state.weights = n.split(';').map(item => {
            let returnData = Number(item.split(',')[1])

            if (returnData === returnData) {
              return returnData
            } else {
              return undefined
            }
          })
        } else {
          state.userList = []
          state.weights = []
        }
        console.log('当前已选择的员工及输入的权重', state.userList, state.weights)
      },
      {immediate: true}
    )

    watch(
      () => [state.userList, state.weights],
      n => {
        emit(
          'update:value',
          state.userList
            .map((item, idx) => {
              return item + ',' + state.weights[idx] || 0
            })
            .join(';')
        )
      },
      {deep: true}
    )

    function handleSelectEmployeeClick() {
      console.log('已选择的员工id列表', userIdList.value)
      getDDUsers({
        users: userIdList.value
      })
        .then(res => {
          if (res !== 'cancel') {
            console.log(res.data)
            state.userList = res.map((item: any) => item.emplId + '-' + item.name)

            state.weights = new Array(res.length).fill(undefined)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }

    function handleTagClose(index: number) {
      state.userList.splice(index, 1)
      console.log('删除后的userList', state.userList)
    }

    return () => (
      <div class=''>
        <a-button type='primary' size='small' class='rounded-4 bg-primary text-white' onClick={handleSelectEmployeeClick}>
          选择指定员工(多选)
        </a-button>

        <div class='w-300 flex flex-col gap-y-8 mt-12'>
          <table>
            {state.userList.map((item, idx) => (
              <tr>
                <td>
                  <CnNormalSpan>{userNameList.value[idx] || ''}的权重</CnNormalSpan>
                </td>
                <td>
                  <TargetWeight
                    class='flex-1'
                    v-model={[state.weights[idx], 'value']}
                  ></TargetWeight>
                </td>
              </tr>
            ))}
          </table>
        </div>
      </div>
    )
  }
})

/**设置 单选组*/
export const ProgressSetRadioGroupItem = defineComponent({
  props: {
    progressSet: {
      type: Object as PropType<Evaluation.PmProgressSet>
    },
    name: {
      type: String,
      required: true
    }
  },
  emits: {
    'update:progressSet': (value: Evaluation.PmProgressSetChildren | null): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      progressSet: Evaluation.PmProgressSetChildren | null
    }>({
      progressSet: null
    })

    watch(
      () => props.progressSet,
      n => {
        console.log('考核组 流程 流程设置获取数据', n)
        if (n) {
          n.pmGroupProgressSetList = n.pmGroupProgressSetList?.sort((a, b) => a.sort - b.sort)
          state.progressSet = n
        } else {
          state.progressSet = null
        }
      },
      {
        immediate: true
      }
    )

    /**单选组 当前为选中状态的项的下标 */
    const currentgroupProgressSetIndex = computed(() => {
      const index = state.progressSet?.pmGroupProgressSetList?.findIndex(
        item => item.pmGroupProgressSetValue === '1'
      )
      return index
    })

    /**单选组 当前为选中状态的项 */
    const currentProgressSet = computed(() => {
      const current = state.progressSet?.pmGroupProgressSetList?.filter(
        item => item.pmGroupProgressSetValue === '1'
      )[0]
      return current
    })

    // 信息补充栏类型 根据单选组中某一项选择后，判断该信息补充栏类型
    const subItemType = computed<string | 'selectEmployeeMultiple' | null>(() => {
      switch (currentProgressSet.value?.pmGroupProgressSetEngName) {
        case 'designAppointEmployee':
          return 'selectEmployeeRadio'
        case 'confirmAppointEmployee':
          return 'selectEmployeeRadio'
        case 'scoreAppointEmployee':
          return 'selectEmployeeAndWeight'
        case 'scoreLeader':
          return 'selectLeaderLevelAndWeight'
        case 'confirmLeader':
          return 'selectLeaderLevelMultiple'
        case 'designLeader':
          return 'selectLeaderLevel'
        case 'checkUser':
        default:
          return null
      }
    })

    function handleRadioChange(e: {target: {value: number}}) {
      const currentSetId = e.target.value
      state.progressSet?.pmGroupProgressSetList?.forEach((item, idx) => {
        if (item.pmGroupProgressSetId === currentSetId) {
          state.progressSet?.pmGroupProgressSetList &&
            (state.progressSet.pmGroupProgressSetList[idx].pmGroupProgressSetValue = '1')
        } else {
          state.progressSet?.pmGroupProgressSetList &&
            (state.progressSet.pmGroupProgressSetList[idx].pmGroupProgressSetValue = '0')
        }
      })
      emit('update:progressSet', state.progressSet)
    }

    return () => (
      <>
        <tr class='h-40'>
          {/* 设置名 */}
          <td class='min-w-120 text-left'>{state.progressSet?.pmGroupProgressSetName || ''}:</td>
          {/* 设置 */}
          <td>
            <a-radio-group
              value={currentProgressSet.value?.pmGroupProgressSetId}
              size='small'
              name={props.name}
              onChange={handleRadioChange}
            >
              {state.progressSet?.pmGroupProgressSetList?.map((option, i) => (
                <a-radio value={option.pmGroupProgressSetId}>
                  {option.pmGroupProgressSetName}
                </a-radio>
              ))}
            </a-radio-group>
          </td>
        </tr>
        {subItemType.value &&
        state.progressSet &&
        state.progressSet.pmGroupProgressSetList &&
        state.progressSet.pmGroupProgressSetList.length &&
        currentgroupProgressSetIndex.value !== undefined ? (
          <tr>
            <td></td>
            <td>
              {subItemType.value === 'selectEmployeeRadio' ? (
                <SelectEmployee
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                  type={'radio'}
                ></SelectEmployee>
              ) : subItemType.value === 'selectEmployeeMultiple' ? (
                <SelectEmployee
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                  type={'multiple'}
                ></SelectEmployee>
              ) : subItemType.value === 'selectEmployeeAndWeight' ? (
                <SelectEmployeeAndWeight
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                ></SelectEmployeeAndWeight>
              ) : subItemType.value === 'selectLeaderLevelAndWeight' ? (
                <SelectLeaderLevelAndWeight
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                ></SelectLeaderLevelAndWeight>
              ) : subItemType.value === 'selectLeaderLevel' ? (
                <SelectLeaderLevel
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                ></SelectLeaderLevel>
              ) : subItemType.value === 'selectLeaderLevelMultiple' ? (
                <SelectLeaderLevelMultiple
                  v-model={[
                    state.progressSet.pmGroupProgressSetList[currentgroupProgressSetIndex.value]
                      .pmGroupProgressSetTemAdditionalValue,
                    'value'
                  ]}
                ></SelectLeaderLevelMultiple>
              ) : null}
            </td>
          </tr>
        ) : null}
      </>
    )
  }
})

/**设置 多选组*/
export const ProgressSetCheckBoxGroupItem = defineComponent({
  props: {
    progressSet: {
      type: Object as PropType<Evaluation.PmProgressSet>,
      default: {
        pmGroupProgressSetId: -1,
        pmGroupProgressId: -1,
        pmGroupProgressSetName: '',
        pmGroupProgressSetEngName: '',
        sort: 0,
        parentId: -1,
        pmGroupProgressSetValue: '',
        pmGroupProgressSetTemAdditionalValue: '',
        pmGroupProgressSetList: undefined
      }
    },
    name: {
      type: String,
      required: true
    }
  },
  emits: {
    'update:progressSet': (value: Evaluation.PmProgressSetChildren): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      progressSet: Evaluation.PmProgressSetChildren
      checkeds: number[]
    }>({
      progressSet: {
        pmGroupProgressSetId: -1,
        pmGroupProgressId: -1,
        pmGroupProgressSetName: '',
        pmGroupProgressSetEngName: '',
        sort: 0,
        parentId: -1,
        pmGroupProgressSetValue: '',
        pmGroupProgressSetTemAdditionalValue: '',
        pmGroupProgressSetList: undefined
      },
      checkeds: []
    })

    const checkBoxOptions = computed(() => {
      return (state.progressSet?.pmGroupProgressSetList || []).map(item => ({
        label: item.pmGroupProgressSetName,
        value: item.pmGroupProgressSetId
      }))
    })

    // 信息补充栏类型 根据单选组中某一项选择后，判断该信息补充栏类型
    const subItemTypes = computed(() => {
      return currentProgressSets.value
        .filter(item => item.pmGroupProgressSetValue === '1')
        .map(item => {
          switch (item.pmGroupProgressSetEngName) {
            case 'designAppointEmployee':
              return {
                type: 'selectEmployeeRadio',
                setId: item.pmGroupProgressSetId
              }
            case 'confirmAppointEmployee':
              return {
                type: 'selectEmployeeMultiple',
                setId: item.pmGroupProgressSetId
              }
            case 'scoreAppointEmployee':
              return {
                type: 'selectEmployeeAndWeight',
                setId: item.pmGroupProgressSetId
              }
            case 'scoreLeader':
              return {
                type: 'selectLeaderLevelAndWeight',
                setId: item.pmGroupProgressSetId
              }
            case 'confirmLeader':
              return {
                type: 'selectLeaderLevelMultiple',
                setId: item.pmGroupProgressSetId
              }
            case 'designLeader':
              return {
                type: 'selectLeaderLevel',
                setId: item.pmGroupProgressSetId
              }
            case 'checkUser':
            default:
              return false
          }
        })
    })

    watch(
      () => props.progressSet,
      n => {
        console.log('考核组 流程 流程设置 多选框组获取数据', n)
        if (n) {
          n.pmGroupProgressSetList = n.pmGroupProgressSetList?.sort((a, b) => a.sort - b.sort)

          state.progressSet = n
          state.checkeds = (n.pmGroupProgressSetList || [])
            .filter(item => item.pmGroupProgressSetValue === '1')
            .map(item => item.pmGroupProgressSetId)
        } else {
          state.progressSet = {
            pmGroupProgressSetId: -1,
            pmGroupProgressId: -1,
            pmGroupProgressSetName: '',
            pmGroupProgressSetEngName: '',
            sort: 0,
            parentId: -1,
            pmGroupProgressSetValue: '',
            pmGroupProgressSetTemAdditionalValue: '',
            pmGroupProgressSetList: undefined
          }
          state.checkeds = []
        }
      },
      {
        immediate: true
      }
    )

    /**多选组 当前为选中状态的项的下标 */
    const currentgroupProgressSetIndex = computed(() => {
      const index = state.progressSet?.pmGroupProgressSetList?.findIndex(
        item => item.pmGroupProgressSetValue === '1'
      )
      return index
    })

    /**多选组 当前为选中状态的项 */
    const currentProgressSets = computed(() => {
      const current =
        state.progressSet?.pmGroupProgressSetList?.filter(
          item => item.pmGroupProgressSetValue === '1'
        ) || []
      return current
    })

    function handleChcekBoxChange(currentSetIds: number[]) {
      state.checkeds = currentSetIds
      ;(state.progressSet?.pmGroupProgressSetList || []).forEach((item, idx) => {
        if (currentSetIds.filter(setId => setId === item.pmGroupProgressSetId).length) {
          state.progressSet?.pmGroupProgressSetList &&
            (state.progressSet.pmGroupProgressSetList[idx].pmGroupProgressSetValue = '1')
        } else {
          state.progressSet?.pmGroupProgressSetList &&
            (state.progressSet.pmGroupProgressSetList[idx].pmGroupProgressSetValue = '0')
        }
      })
      emit('update:progressSet', state.progressSet)
    }

    function getCurrentSetIdx(setId: number) {
      if (state.progressSet.pmGroupProgressSetList) {
        let idx = state.progressSet.pmGroupProgressSetList.findIndex(
          item => item.pmGroupProgressSetId === setId
        )
        return (idx ?? null) === null ? false : idx
      } else {
        return false
      }
    }

    return () => (
      <>
        <tr class='h-40'>
          {/* 设置名 */}
          <td class='min-w-120 text-left'>{state.progressSet?.pmGroupProgressSetName || ''}:</td>
          {/* 设置 */}
          <td>
            <a-checkbox-group
              value={state.checkeds}
              size='small'
              name={props.name}
              options={checkBoxOptions.value}
              onChange={handleChcekBoxChange}
            ></a-checkbox-group>
          </td>
        </tr>
        {subItemTypes.value.map(item => {
          if (item) {
            let currentSetIdx = getCurrentSetIdx(item.setId)
            if (currentSetIdx !== false) {
              return (
                <tr>
                  <td></td>
                  <td>
                    {state.progressSet.pmGroupProgressSetList &&
                    state.progressSet.pmGroupProgressSetList.length ? (
                      item.type === 'selectEmployeeRadio' ? (
                        <SelectEmployee
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                        ></SelectEmployee>
                      ) : item.type === 'selectEmployeeMultiple' ? (
                        <SelectEmployee
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                          type={'multiple'}
                        ></SelectEmployee>
                      ) : item.type === 'selectEmployeeAndWeight' ? (
                        <SelectEmployeeAndWeight
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                        ></SelectEmployeeAndWeight>
                      ) : item.type === 'selectLeaderLevelAndWeight' ? (
                        <SelectLeaderLevelAndWeight
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                        ></SelectLeaderLevelAndWeight>
                      ) : item.type === 'selectLeaderLevel' ? (
                        <SelectLeaderLevel
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                        ></SelectLeaderLevel>
                      ) : item.type === 'selectLeaderLevelMultiple' ? (
                        <SelectLeaderLevelMultiple
                          v-model={[
                            state.progressSet.pmGroupProgressSetList[currentSetIdx]
                              .pmGroupProgressSetTemAdditionalValue,
                            'value'
                          ]}
                        ></SelectLeaderLevelMultiple>
                      ) : null
                    ) : null}
                  </td>
                </tr>
              )
            } else {
              return null
            }
          } else {
            return null
          }
        })}
      </>
    )
  }
})
